<template>
  <div class="rank">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="charContainer">
      <div class="rankChart" v-for="(item, index) in sortedChartData" :key="index">
        <span class="index-square" :style="getSquareStyle(index)">{{ ` NO.${index + 1}` }}</span>
        <div class="progress-container">
          <div class="progress-text">
            <span class="label" :title="item.name">{{ item.name }}</span>
            <el-progress :percentage="getPercentage(item.value)" :stroke-width="8" :show-text="false"
              :style="getProgressStyle(index)" />
            <span class="percentage" :title="formatDuration(item.value)">{{ formatDuration(item.value) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lRTitle from './lRTitle.vue';
import { parseTime, formatDuration } from "@/utils/index.js";
import { connrequest2 } from "@/api/firstPage.js"

export default {
  name: "staffRank",
  props: {
    days: {
      type: Number,
      default: 7
    }
  },
  data() {
    return {
      chartData: [],
      statusTitle: "绩效分析"
    };
  },
  watch: {

  },
  computed: {
    sortedChartData() {
      return [...this.chartData].sort((a, b) => b.value - a.value)
        .slice(0, 10); // 只取前10条数据;
    },
    maxCount() {
      return Math.max(...this.sortedChartData.map(item => item.value));
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {

  },
  methods: {
    formatDuration,
    getSquareStyle(index) {
      const colors = ['#F56C6C', '#E6A23C', '#FADC19']; // 红 橙 黄
      const color = index < 3 ? colors[index] : '#cccccc';

      return {
        backgroundColor: this.hexToRgba(color, 0.15), // 背景透明
        color: color, // 字体颜色
        borderLeft: `3px solid ${colors[index]}` 
      };
    },
    hexToRgba(hex, alpha = 1) {
      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    },
    async getData() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - (this.days * 1 * 3600 * 24 * 1000);
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 5,
        },
        Filter: {
          StartData: parseTime(startTime, '{y}-{m}-{d}'),
          EndData: '',
        }
      }
      const res = await connrequest2('GetWindowProcSumGroupByProcName', data)
      let arr = res.Data.map(item => {
        return {
          name: item.Name,
          value: item.Count
        }
      })
      this.chartData = arr.slice(0, 5)
    },
    getPercentage(count) {
      if (this.maxCount === 0) return 0;
      return Math.round((count / this.maxCount) * 100);
    },
    getProgressStyle(index) {
      return {
        width: '100%',
      };
    },

  },
  components: {
    lRTitle
  }
}
</script>
<style scoped lang="scss">
.rank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  /* background-color: aqua; */
  height: 24%;

  .charContainer {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .rankChart {
    display: flex;
    align-items: center;
    padding: 0 28px;
    margin-bottom: 8px;
  }

  .rankChart:first-child {
    margin-top: 8px;
  }

  .rankChart:last-child {
    margin-bottom: 0;
  }

  .index-square {
    color: white;
    font-size: 12px;
    background-size: 100%;
    padding: 5px 10px;
    border-left: 3px solid #409EFF;
    background: #153451;
    // background: url('~@/assets/aiScreen/paiming@2x.png')no-repeat center;
  }

  .progress-text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    padding-left: 5px;
  }

  .label {
    color: #ccc;
    font-size: 14px;
    white-space: nowrap;
    /*不允许换行，防止影响布局 */
    overflow: hidden;
    /*超出后不允许出现滚动条，影响美观 */
    text-overflow: ellipsis;
    /*超出宽度的文字用省略号显示 */
    width: 45%;
  }

  .progress-container {
    flex-grow: 1;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #0d273e;
    padding: 6px 3px;
  }

  .percentage {
    width: 35%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
  }

  ::v-deep .el-progress-bar__outer {
    background-color: #0b1e2f !important;
  }

  ::v-deep .el-progress-bar__inner {
    background: linear-gradient(to right,rgba(10,55,74,0.80), rgba(36,163,216,0.94), #a4e4ff) !important;
  }
}
</style>